<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
</head>
<body>
    <h3>相对定位</h3>
    
    <div class="relative">
        定位测试，<span>圈定圈定</span>定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试
        定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试
    </div>
    <br><br>
    
    <h3>绝对定位</h3>
    
    <div class="absolute">
        <div class="son">
            绝对定位
        </div>
    </div>
    <br><br>
    
    <h3>固定定位</h3>
    
    <div class="top">置顶</div>
    <div class="fixed">
        <div class="left">左侧边</div>
        <div class="right">右侧边</div>
    </div>
    <div class="bottom">置底</div>
    <style>
      
        .relative {
            background-color: rgb(131, 64, 213);
            position: relative;
            top: 10px;
            left: 15px;
        }
    
        .relative span {
            position: relative;
            background-color: yellow;
            bottom: 15px;
            right: 10px;
        }
    
     
        .absolute {
            width: 200px;
            height: 200px;
            border: 1px dashed red;
            position: relative;
        }
    
        .son {
            background-color: green;
            position: absolute;
            top: 20px;
            left: 10px;
        }
    
  
        .top,
        .bottom {
            height: 50px;
            background-color: rgb(119, 35, 38);
        }
    
        .top {
            margin-bottom: 8px;
        }
    
        .bottom {
            margin-top: 20px;
        }
    
        .left,
        .right {
            width: 100px;
            height: 200px;
            background-color: rgb(106, 175, 224);
    
        }
    
        .fixed {
            display: flex;
            justify-content: space-between;
        }
    </style>
</body>
</html>